	<div class="wrapper wrapper-content" ng-controller="CostCenterMasterController" >

		<div class="row">
			<div class="col-lg-12">
				<div class="tabs-container">

					<uib-tabset>
						<uib-tab heading="{{'SETTING.COSTCENTER' | translate}}">
							<div class="panel-body" ng-controller="CostCenterController">
								<a ng-click="addCostCenter()" class="btn btn-primary btn-rounded btn-outline" href=""><i class="fa fa-plus-circle"></i> {{'SETTING.ADD_COSTCENTER' | translate}}</a>
								<table class="table table-bordered table-hover" >
									<thead>
										<tr>
											<th class="text-center">{{'SETTING.ID' | translate}}</th>
											<th class="text-center">{{'SETTING.NAME' | translate}}</th>
											<th class="text-center">{{'COSTCENTER.EXTERNAL_ID' | translate}}</th>
											<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
										</tr>
									</thead>
									<tbody>
										<tr ng-repeat="costcenter in costcenters">
											<td class="text-center">{{ costcenter.id }}</td>
											<td class="text-center">{{ costcenter.name }}</td>
											<td class="text-center">{{ costcenter.external_id }}</td>
											<td class="text-center">
												<a class="btn btn-primary btn-rounded btn-xs" ng-click="editCostCenter(costcenter)" >{{'SETTING.EDIT' | translate}}</a>
												<a ng-click="deleteCostCenter(costcenter)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>

											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</uib-tab>
						<uib-tab heading="{{'SETTING.BIND_TARIFF' | translate}}">
								<div class="panel-body" ng-controller="CostCenterTariffController">
									<div class="row">
										<div class="col-lg-3">
											<div class="panel panel-info">
												<div class="panel-heading">
													{{'SETTING.SELECT_COSTCENTER' | translate}}
												</div>
												<div class="panel-body" slim-scroll box-height="600px">
													<div ng-repeat="costcenter in costcenters" class="radio radio-info">
													    <input type="radio" name="radiocostcenter" id="radiocostcenter{{costcenter.id}}" ng-value="costcenter" ng-model="$parent.currentCostCenter" ng-change="changeCostCenter()" >
													    <label for="radiocostcenter{{costcenter.id}}">
													        {{costcenter.name}}
													    </label>
													</div>
												</div>

											</div>

										</div>
										<div class="col-lg-3">
											<div class="panel panel-primary">
												<div class="panel-heading">
													{{currentCostCenter.name}}{{'SETTING.N_S_TARIFF' | translate}}
												</div>
												<div class="panel-body maxheight"
												x-hjc-drop-target="true"
												x-on-drop="pairTariff(dragEl,dropEl)"
												uib-tooltip="{{'SETTING.DRAG_TO_UNBIND' | translate}}" >
												<div class="btn btn-primary btn-rounded btn-block"
												ng-repeat="costcentertariff in costcentertariffs"
												x-hjc-draggable="true"> {{costcentertariff.name}}</div>

											</div>
										</div>
										<div class="panel panel-danger">
											<div class="panel-heading">
												{{'SETTING.TRASH' | translate}}
											</div>
											<div class="panel-body trash" >
												<img class="trashcan"
												src="img/trashcan.png"
												x-hjc-drop-target="true"
												x-on-drop="deleteTariffPair(dragEl,dropEl)">
											</div>

										</div>
									</div>

									<div class="col-lg-4">
										<div class="panel panel-info">
											<div class="panel-heading">
												{{'SETTING.TARIFF_LIST' | translate}}
											</div>
											<div class="panel-body" slim-scroll box-height="600px"
											uib-tooltip="{{'SETTING.DRAG_TO_BIND' | translate}}">
												<div class="source btn btn-info btn-rounded btn-block"
												ng-repeat="tariff in tariffs"
												x-hjc-draggable="true"> {{tariff.name}}</div>
											</div>

										</div>

									</div>
								</div>

							</div>
						</uib-tab>

						<uib-tab heading="{{'SETTING.FINANCIAL_COST' | translate}}">
								<div class="panel-body" ng-controller="CostFileController">
									<div id="dropzone1" class="dropzone" options="dzOptions" callbacks="dzCallbacks" ng-dropzone></div>
									<table class="table table-bordered table-hover" >
										<thead>
											<tr>
												<th class="text-center">{{'SETTING.NAME' | translate}}</th>
												<th class="text-center">{{'SETTING.STATUS' | translate}}</th>
												<th class="text-center">{{'SETTING.UPLOAD_TIME' | translate}}</th>
												<th class="text-center">{{'SETTING.ACTION' | translate}}</th>
											</tr>
										</thead>
										<tbody>
											<tr ng-repeat="costfile in costfiles">
												<td class="text-center">{{ costfile.file_name }}</td>
												<td class="text-center">{{ costfile.status }}</td>
												<td class="text-center">{{ costfile.upload_datetime | date:'yyyy-MM-dd HH:mm'}}</td>

												<td class="text-center">
													<a ng-click="deleteCostFile(costfile)" class="btn btn-danger btn-rounded btn-xs" >{{'SETTING.DELETE' | translate}}</a>

												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</uib-tab>

					</uib-tabset>

				</div>
			</div>
		</div>



	</div>
